<template>
  <div class="loss-bottle-page">
    <div class="page-header">
      <h2>扔瓶子</h2>
      <p>把你的想法装进漂流瓶，让它随波逐流</p>
    </div>

    <div class="loss-content">
      <div class="bottle-form-card">
        <h3>🌊 写下你想分享的内容</h3>
        <form @submit.prevent="throwBottle">
          <div class="form-group">
            <label>标题</label>
            <input 
              v-model="newBottleTitle" 
              type="text" 
              placeholder="给你的瓶子起个标题..." 
              maxlength="20"
            >
          </div>

          <div class="form-group">
            <label>内容 <span class="required">*</span></label>
            <textarea 
              v-model="newBottleContent" 
              placeholder="写下你想分享的内容..." 
              rows="6" 
              maxlength="500"
              required
            ></textarea>
            <div class="char-count">{{ newBottleContent.length }}/500</div>
          </div>

          <div class="form-group">
            <label>标签</label>
            <input 
              v-model="newBottleTags" 
              type="text" 
              placeholder="用逗号分隔，如：运动,健身,跑步" 
              maxlength="50"
            >
          </div>

          <div class="form-group">
            <label>位置</label>
            <input 
              v-model="newBottleLocation" 
              type="text" 
              placeholder="你在哪里？" 
              maxlength="30"
            >
          </div>

          <div class="form-group">
            <label>心情</label>
            <div class="mood-selector">
              <label class="mood-option" :class="{ active: newBottleMood === 'happy' }">
                <input v-model="newBottleMood" type="radio" value="happy">
                <span>😊 开心</span>
              </label>
              <label class="mood-option" :class="{ active: newBottleMood === 'excited' }">
                <input v-model="newBottleMood" type="radio" value="excited">
                <span>🤩 兴奋</span>
              </label>
              <label class="mood-option" :class="{ active: newBottleMood === 'peaceful' }">
                <input v-model="newBottleMood" type="radio" value="peaceful">
                <span>😌 平静</span>
              </label>
              <label class="mood-option" :class="{ active: newBottleMood === 'motivated' }">
                <input v-model="newBottleMood" type="radio" value="motivated">
                <span>💪 励志</span>
              </label>
            </div>
          </div>

          <div class="form-actions">
            <button 
              class="submit-btn" 
              type="submit" 
              :disabled="isThrowing"
            >
              <span v-if="isThrowing">扔出中...</span>
              <span v-else>🌊 扔出瓶子</span>
            </button>
          </div>
        </form>
      </div>

      <div class="tips-section">
        <h3>💡 投瓶小贴士</h3>
        <ul>
          <li>内容积极向上，遵守社区规范</li>
          <li>避免透露个人隐私信息</li>
          <li>标签有助于他人更好地发现你的瓶子</li>
          <li>真实的位置信息能让附近的人更容易找到你</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const newBottleTitle = ref('')
const newBottleContent = ref('')
const newBottleTags = ref('')
const newBottleLocation = ref('')
const newBottleMood = ref('happy')
const isThrowing = ref(false)

// 扔瓶子功能
const throwBottle = async () => {
  if (!newBottleContent.value.trim()) {
    alert('请输入瓶子内容')
    return
  }

  isThrowing.value = true

  try {
    // 模拟发送瓶子的过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 这里可以添加实际的发送逻辑
    console.log('扔出的瓶子:', {
      title: newBottleTitle.value,
      content: newBottleContent.value,
      tags: newBottleTags.value.split(',').map(tag => tag.trim()).filter(tag => tag),
      location: newBottleLocation.value,
      mood: newBottleMood.value
    })

    // 重置表单
    newBottleContent.value = ''
    newBottleTitle.value = ''
    newBottleTags.value = ''
    newBottleLocation.value = ''
    newBottleMood.value = 'happy'

    alert('瓶子已成功扔出！')
  } catch (error) {
    console.error('扔瓶子失败:', error)
    alert('扔瓶子失败，请重试')
  } finally {
    isThrowing.value = false
  }
}
</script>

<style scoped>
.loss-bottle-page {
  padding: 20px;
  background: linear-gradient(135deg, #2ECC71 0%, #27AE60 25%, #16A085 50%, #1ABC9C 75%, #2ECC71 100%);
  min-height: 100vh;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h2 {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header p {
  font-size: 16px;
  opacity: 0.9;
}

.loss-content {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.bottle-form-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bottle-form-card h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: white;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.required {
  color: #ff6b6b;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2ECC71;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
}

.char-count {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-top: 5px;
}

.mood-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mood-option {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mood-option:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #2ECC71;
}

.mood-option.active {
  background: #2ECC71;
  border-color: #27AE60;
}

.mood-option input {
  display: none;
}

.mood-option span {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.mood-option.active span {
  color: white;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.submit-btn {
  background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
  color: white;
  border: none;
  border-radius: 24px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.tips-section {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tips-section h3 {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.tips-section ul {
  padding-left: 20px;
  margin: 0;
}

.tips-section li {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .loss-content {
    grid-template-columns: 1fr;
  }

  .mood-selector {
    grid-template-columns: 1fr;
  }
}
</style>